<!DOCTYPE html>
<!-- saved from url=(0070)https://m.zuche.com/html5/newversion/e/sfcreserve.html?v=1544247477215 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="/js/jquery-3.2.1.js"></script>

<script src="/css/H5phone/dev/js/mobiscroll.core-2.5.2.js"
	type="text/javascript"></script>
<script src="/css/H5phone/dev/js/mobiscroll.core-2.5.2-zh.js"
	type="text/javascript"></script>

<link href="/css/H5phone/dev/css/mobiscroll.core-2.5.2.css"
	rel="stylesheet" type="text/css" />
<link href="/css/H5phone/dev/css/mobiscroll.animation-2.5.2.css"
	rel="stylesheet" type="text/css" />
<script src="/css/H5phone/dev/js/mobiscroll.datetime-2.5.1.js"
	type="text/javascript"></script>
<script src="/css/H5phone/dev/js/mobiscroll.datetime-2.5.1-zh.js"
	type="text/javascript"></script>

<!-- S 可根据自己喜好引入样式风格文件 -->
<script src="/css/H5phone/dev/js/mobiscroll.android-ics-2.5.2.js"
	type="text/javascript"></script>
<link href="/css/H5phone/dev/css/mobiscroll.android-ics-2.5.2.css"
	rel="stylesheet" type="text/css" />

<style type="text/css">
body {
	padding: 0;
	margin: 0;
	font-family: arial, verdana, sans-serif;
	font-size: 12px;
	background: #ddd;
}

input, select {
	width: 100%;
	padding: 5px;
	margin: 5px 0;
	border: 1px solid #aaa;
	box-sizing: border-box;
	border-radius: 5px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-webkit-border-radius: 5px;
}

.header {
	border: 1px solid #333;
	background: #111;
	color: white;
	font-weight: bold;
	text-shadow: 0 -1px 1px black;
	background-image: linear-gradient(#3C3C3C, #111);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#3C3C3C),
		to(#111));
	background-image: -moz-linear-gradient(#3C3C3C, #111);
}

.header h1 {
	text-align: center;
	font-size: 16px;
	margin: .6em 0;
	padding: 0;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.content {
	padding: 15px;
	background: #fff;
}
</style>
<link href="http://m.zuche.com/" rel="dns-prefetch">
<title>顺风车预订</title>
<meta name="description"
	content="神州租车-全国70大城市,90大机场高铁,万辆新车,不限里程,价格超低,手续便捷,服务尽心,24小时服务,携手贝克汉姆共启云战略.Tel:400-616-6666">
<meta name="keywords"
	content="租车，租车网，租车公司，汽车租赁，H_lYMbU-rQ0RUInbjlkbxqyQBhQ">
<meta name="viewport"
	content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-title" content="神州租车">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="baidu-tc-cerfication"
	content="55c603db1cd78c7f7ab7686162824f23">
<link rel="stylesheet" type="text/css"
	href="/css/H5phone/downwindbooking_files/common@ee713f7a54.css">
<link rel="stylesheet" type="text/css"
	href="/css/H5phone/downwindbooking_files/llsr@0a99870419.css">

</head>

<body style="" rlt="1">
	<header>
		<div class="getback" data-url="/shun/toViewShow?pageIndex=${pageIndex}"> 
			<span class="getbackimg">&nbsp;</span>
		</div>
		<h1 class="header_title">顺风车预订</h1>
	</header>
	<#if ccct??>
	<span style="display: none" class="ccct">
	${ccct}
	</span>
	</#if>
	
	<#if pageIndex??>
	<span style="display: none" class="pageIndex">
	${pageIndex}
	</span>
	</#if>
	
	
	


		<div id="errors" style="display: none">
<#if error??>
${error}
</#if>
</div>
	<div id="tmpInfo" class="bgwhite">
		<div class="clearfix p10 f12">
			<div id="brandName" class="fl black">${veh.vehicleBrandName}${veh.carTypeName}</div>
			<input type="hidden" id="xid" value="442215">
			<div id="modelName" style="display: none;">SUV/1.8T自动</div>
			<div class="fr gray666">
				优惠后总金额：<span class="orangef89">¥<span id="preferentialPrice"
					class="bigs">${money}</span></span>
			</div>
			<span class="id" style="display: none">${veh.hitchingrideId}</span>
		</div>
		<div class="sfcydinfo f12">
			<p>
				<span class="big black">${veh.takeCarCity}</span> <span
					class="cityjb">&nbsp;</span> <span class="big black">${veh.carCity}</span>
			</p>
			<p>
				预订正常租金：<span class="black">${veh.theRent*veh.days}元</span>
			</p>
			<p>
				燃油费过路费：<span class="black"> 自理 </span>
			</p>
			<p>
				限定使用里程：<span class="black">${veh.limitedRange}公里</span>
			</p>
		</div>
	</div>
	<div id="tmpBody">
		<div class="p10 gray666">取车信息</div>
		<ul class="sfcydinfotwo clearfix">
			<li id="leaseCity" class="sleft">${veh.takeCarCity}</li>
			<li id="leaseDep" class="sleft"><span>${veh.thecarstores}</span></li>
			<li id="leaseTimeSelect" style="width: 47%; height: 50px;"
				class="sright">
				<#if startTime??>
				<input
				style="font-weight: bold; text-align: center;" type="text"
				name="appDateTime" value="${startTime}" id="appDateTime" /></li>
				<#else>
				<input
				style="font-weight: bold; text-align: center;" type="text"
				name="appDateTime" id="appDateTime" /></li>
				</#if>
				


		</ul>

		
		<div class="p10 gray666">还车信息</div>
		<ul class="sfcydinfotwo clearfix">
			<li id="returnCity" class="sleft">${veh.carCity}</li>
			<li id="returnDep" class="sleft" style="background-color: #ffffff;">
			<#if hccity??>
			<span>${hccity}</span></li>
			<#else>
				<span></span></li>
			</#if> 
		
			<li id="returnTime" class="sright"
				style="width: 47%; height: 50px; background-color: #f2f2f2;">
				<#if stopTime??>
				<input
				style="font-weight: bold; text-align: center; background-color: #f2f2f2; border: none;"
				disabled="none" value="${stopTime}" type="text" name="" id="huanche" /></li>
				<#else>
				<input
				style="font-weight: bold; text-align: center; background-color: #f2f2f2; border: none;"
				disabled="none" value="" type="text" name="" id="huanche" /></li>
				</#if>
				
				
		</ul>
		<div class="p10 f12 gray666" >
			${veh.startTime?string("yyyy-MM-dd HH:mm:ss")} — ${veh.stopTime?string("yyyy-MM-dd HH:mm:ss")}&nbsp;&nbsp;&nbsp;限租期 <input
				class="yin" type="hidden" value="2" /> <span class="orangef89">${veh.days}天</span>
		</div>
		
		<span class="startTime" style="display: none">${veh.startTime?date}</span>
			<span class="stopTime" style="display: none">${veh.stopTime?date}</span>
	</div>



	<footer style="position: static;">
		<button type="button" id="reserveBtn" class="orangebut">立即预订</button>
	</footer>

	<div id="loading-mask" class="mask" style="display: none;">
		<div class="loading-new">
			<span class="l-logo"></span><span class="l-film animate-loading"></span>
		</div>
	</div>
	
	<div class="dialogSuccess" style="display: none">
				<div class="dialog-closeSuccess" onclick="closeM()"></div>
				<div id="message" class="dialog-contentSuccess"></div>
			</div>


	<script type="text/javascript">
	
	window.timeouts(3,1);
	var times = 3;
	function timeouts(tim,nan){

		var errores = $("#errors").html().trim();
		setTimeout("timeouts()", 1000)
		if(errores=="1"){
			if(nan==1){
				$(".dialogSuccess").css("display","block")
				$("#message").text("验证信息出现有误，将于"+tim+"秒后返回登陆页面！")
				nan=2;
			}else{
				$(".dialogSuccess").css("display","block")
				$("#message").text("验证信息出现有误，将于"+(times=times-1)+"秒后返回登陆页面！")
			}
			
			setTimeout("location.href='/jump/logins'", 3000);
		}
	}
	
	
	
	  $(function () {
			var currYear = (new Date()).getFullYear();	
			var opt={};
			opt.date = {preset : 'date'};
			//opt.datetime = { preset : 'datetime', minDate: new Date(2012,3,10,9,22), maxDate: new Date(2014,7,30,15,44), stepMinute: 5  };
			opt.datetime = {preset : 'datetime'};
			opt.time = {preset : 'time'};
			opt.default = {	
				theme: 'android-ics light', //皮肤样式
		        display: 'modal', //显示方式 
		        mode: 'scroller', //日期选择模式
				lang:'zh',
		        startYear:currYear - 10, //开始年份
		        endYear:currYear + 10 //结束年份
			};
		  	var optDateTime = $.extend(opt['datetime'], opt['default']);
		  	var optTime = $.extend(opt['time'], opt['default']);
		    $("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime);
		  
			 $("#appDateTime").on("change",function(){
        var time = new Date($("#appDateTime").val())
        var dayCount =  new Date(time.getFullYear(),(time.getMonth()+1),0).getDate();
        var ri = time.getDate();
        var nian = time.getFullYear();
     	var days = $(".yin").val();
     	var yue = time.getMonth()+1;
     	ri = ri+parseInt(days);
     	if(ri>dayCount){
     		yue = yue+1;
     		ri = ri-dayCount;
     		if(yue>12){
     			nian = nian+1;
     			yue = yue-12;
     		}
     	}
     	if(yue<10){
     		yue = "0"+yue;
     	}
     	$("#huanche").val(nian+"-"+yue+"-"+ri+" "+time.getHours()+":"+time.getMinutes());
        })
        
        $("#returnDep").click(function(){
        	var place = $("#returnCity").text().trim();
        	var money = $(".bigs").text().trim();
        	var id =$(".id").text().trim();
        	var startTime = $("#appDateTime").val();
        	var huanche = $("#huanche").val();
        	var ccct = $(".ccct").text().trim();
        	var pageIndex = $(".pageIndex").text().trim();
        	location.href="/jump/toMap?place="+place+"&pan=1"+"&zctype=1"+"&smtype=2"+"&id="+id+"&money="+money+"&startTime="+startTime+"&stopTime="+huanche+"&ccct="+ccct+"&pageIndex="+pageIndex;
        })
        
           $(".getback").click(function(){
	window.location.href=$(".getback").data("url");
})

$(".getback").click(function(){
	window.location.href=$(".getback").data("url");
})
        
        $("#reserveBtn").click(function(){
        	var ids = $(".id").text().trim();
        	var quaddress = $("#returnDep").text().trim();
        	var appDateTime = $("#appDateTime").val();
        	
        	var startTime = $(".startTime").text().trim();
        	var stopTime = $(".stopTime").text().trim();
        	var start = new Date(startTime.replace("-", "/").replace("-", "/"));
        	var stop = new Date(stopTime.replace("-", "/").replace("-", "/"));
        	var end  = new Date(appDateTime.replace("-", "/").replace("-", "/"));
        	if(start>end){
        		$(".dialogSuccess").css("display","block")
				$("#message").text("输入日期不正确，已超过限定日期！")
				return false;
        	}
        	if(stop<end){
        		$(".dialogSuccess").css("display","block")
				$("#message").text("输入日期不正确，已超过限定日期！")
				return false;
        	}
        	if(quaddress==""){
        		$(".dialogSuccess").css("display","block")
				$("#message").text("请选择还车地点信息！")
				return false;
        	}
        	if(appDateTime==""){
        		$(".dialogSuccess").css("display","block")
				$("#message").text("请选择取车时间！")
				return false;
        	}
        	var huanche = $("#huanche").val();
        	var pageIndex = $(".pageIndex").text().trim();
        	var hccity = $("#returnDep").find("span").eq(0).text().trim();
        	var money = $("#preferentialPrice").text().trim();
        	location.href="/shun/confirmOrder?ids="+ids+"&quaddress="+quaddress+"&appDateTime="+appDateTime+"&huanche="+huanche+"&hccity="+hccity+"&money="+money+"&pageIndex="+pageIndex;
        })
        
        closeM = function() {
					
					$("#message").text("");
					$(".dialogSuccess").hide();
				}
			 	 
        });
       
</script>

</body>
</html>